<script setup>
import { ref, onMounted} from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue';
import {ElMessage} from "element-plus";
import { Plus } from '@element-plus/icons-vue'
import { addGoodsService, delGoodsService, getGoodsService, updateGoodsService } from '@/apis/goods';
import {delCommunityPost, getCommunityPost} from "@/community.js";

const supplierForm = ref()
const dialogFormVisible = ref(false)
const form = ref({
  id: null,
  goodsId:1
})

const addOrEdit = ref('')

const communityTableData = ref([])
const total = ref(0)
const searchInfo = ref({
  page: 1,
  pageSize: 10,
  title: '',
  userId: '',
  postId: ''
})
const getAllPost = async () => {
  const res = await getCommunityPost(searchInfo.value)
  console.log(res);
  communityTableData.value = res.data.records
  total.value = res.data.total
}
const handleReset = () => {
  searchInfo.value = {}
  getAllPost()
}
const handlePageChange = (page) => {
  console.log(page);

  searchInfo.value.page = page
  getAllPost()
}

const del = async (id) => {
  const res = await delCommunityPost(id)
  if (res.code === 200) {
    communityTableData.value = communityTableData.value.filter(item=> item.postId !== id )
    ElMessage.success('删除成功')
  } else {
    ElMessage.error('删除失败')
  }
}


const deleteDialog = async (id) => {
  ElMessageBox.confirm(
    '是否删除？',
    '提示',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(  rs => del(id))
    .catch(err => void 0)
}


onMounted(() => {
  getAllPost()
})
</script>

<template>
  <el-container>
    <el-header>
      <el-form>
        <el-form-item>
          <span>商品名称</span>
          <el-input v-model="searchInfo.title" style="width: 240px" placeholder="请输入商品名称" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getAllPost">
            <el-icon>
              <Search />
            </el-icon>搜索
          </el-button>
          <el-button @click="handleReset">
            <el-icon>
              <Refresh />
            </el-icon>重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main v-if="communityTableData.length !== 0">
      <el-table :data="communityTableData" style="width: 100%"  height="auto">

        <el-table-column prop="postId" label="ID">
        </el-table-column>

        <el-table-column prop="userId" label="用户id" />

        <el-table-column prop="title" label="标题"  width="150">
        </el-table-column>

        <el-table-column prop="content" label="内容" width="150"></el-table-column>

        <el-table-column #default="{row}" label="创建时间" width="150">
          {{ new Date(row.createdAt).toLocaleDateString() }}
        </el-table-column>


        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button link type="danger" size="small" @click="deleteDialog(scope.row.postId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer v-if="communityTableData.length !== 0">
      <el-pagination background layout="prev, pager, next" :total="total" @change="handlePageChange" />
    </el-footer>
    <EmptyData v-else @reset="handleReset" />

  </el-container>
</template>
<style scoped lang="scss">
@import url("@/assets/style/manage.scss");
</style>
